<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    关于VueComponent：
        1.school组件本质是一个名为VueComponent的构造函数，且不是我们自己定义的，是Vue.extend生成的
        2.我们只需要写<school></school>或者</school>,vue解析时会帮我们创建该组件的实例对象。
          即Vue帮我们执行的：new VueComponent(options)
        3.特别注意的是：每次调用Vue.extend，返回的都是一个全线的VueComponent！！！
        4.关于this指向：
            （1）组件配置中：
                  data函数、methods中的函数、watch中的函数、computed中的函数，它们的this指向均是【VueComponent实例对象】
            （2）new Vue(options)配置中：
                  data函数、methods中的函数、watch中的函数、computed中的函数，它们的this指向均是【Vue实例对象】
        5.VueComponent的实例对象，以后简称 vc （也称之为：组件实例对象）
          Vue的实例对象，简称 vm
        
        vm 管理着一堆 vc：它身上有一个数组：$children
        在这个例子中，vm1.$children有 school的VueComponent和hello的VueComponent。hello.$children下有一个test的VueComponent
    -->
    <div id="root1">
      <school></school>
      <hello></hello>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const school = Vue.extend({
        name: "school",
        template: `
           <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
           </div>
           `,
        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京",
          };
        },
        methods: {
          showName() {
            // ！！！这里的this 指向本身这个 组件的实例对象，也就是vc VueComponent
            console.log("在组件中，this是vc：", this);

            alert(this.schoolName);
          },
        },
      });
      /*  school的类型是 VueComponent 构造函数
          以后用这个，就需要在前边 new VueComponent(options)
          ！！！注意如果用这种简写形式 const school = {} ，那么类型就是普通对象了，只不过vue之后会用extend方法帮我们生成VueComponent 构造函数
          ƒ VueComponent(options) {
              this._init(options);
          }
      */

      const test = Vue.extend({
        template: `<span>test</span>`,
      });

      // 定义hello组件
      const hello = Vue.extend({
        name: "hello",
        template: `
           <div>
                <h1>{{msg}}</h1>
                <test></test>
           </div>
           `,
        data() {
          return {
            msg: "hello",
          };
        },
        components: { test: test },
      });
      console.log("school的类型:", school);
      console.log("school是否等于hello：", school === hello);

      const vm1 = new Vue({
        el: "#root1",
        data: {
          msg: "你好啊",
        },
        // 第二步：注册组件（局部注册）
        components: {
          school: school, // key:value 同名可以省略成 key     value才是组件真实的位置，key是使用组件的时候用的名
          hello: hello,
        },
      });
    </script>
  </body>
</html>
